<template>
  <div class="min-h-screen bg-gray-50 ">
    <div class="max-w-6xl mx-auto px-4 py-6">
      <!-- Header -->
      <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900  mb-1">
          Welcome back, <span class="text-blue-600 ">{{ userDisplayName }}</span>
        </h1>
        <p class="text-sm text-gray-600 ">
          Here's what's happening with your AI workforce today
        </p>
      </div>

      <!-- Stats Grid -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Revenue</p>
              <p class="text-xl font-bold text-gray-900 ">${{ (totalEarnings || 0).toFixed(0) }}</p>
            </div>
            <div class="w-8 h-8 bg-green-100  rounded-lg flex items-center justify-center">
              <svg class="w-6 h-6 text-green-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">This Month</p>
              <p class="text-xl font-bold text-gray-900 ">${{ (monthlyEarnings || 0).toFixed(0) }}</p>
            </div>
            <div class="w-8 h-8 bg-blue-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-blue-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Users</p>
              <p class="text-xl font-bold text-gray-900 ">{{ totalUsers.toLocaleString() }}</p>
            </div>
            <div class="w-8 h-8 bg-purple-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-purple-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Tasks Done</p>
              <p class="text-xl font-bold text-gray-900 ">{{ totalTasksCompleted }}</p>
            </div>
            <div class="w-8 h-8 bg-orange-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-orange-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- Charts Section -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Revenue Chart -->
        <div class="bg-white  rounded-lg border border-gray-200 ">
          <div class="p-4 border-b border-gray-200 ">
            <h2 class="text-lg font-semibold text-gray-900 ">Revenue Trend</h2>
          </div>
          <div class="p-4">
            <div class="h-48 flex items-end justify-between space-x-2">
              <div 
                v-for="(value, index) in revenueData" 
                :key="index"
                class="flex-1 bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg relative group"
                :style="{ height: `${(value / Math.max(...revenueData)) * 100}%` }"
              >
                <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-900  text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                  ${{ value }}
                </div>
              </div>
            </div>
            <div class="flex justify-between mt-3 text-xs text-gray-600 ">
              <span v-for="month in months" :key="month">{{ month }}</span>
            </div>
          </div>
        </div>

        <!-- Usage Chart -->
        <div class="bg-white  rounded-lg border border-gray-200 ">
          <div class="p-4 border-b border-gray-200 ">
            <h2 class="text-lg font-semibold text-gray-900 ">Agent Usage</h2>
          </div>
          <div class="p-4">
            <div class="space-y-3">
              <div 
                v-for="agent in topAgents" 
                :key="agent.id"
                class="flex items-center justify-between"
              >
                <div class="flex items-center space-x-2">
                  <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">
                    {{ agent.metadata.logo }}
                  </div>
                  <span class="text-sm font-medium text-gray-900 ">{{ agent.name }}</span>
                </div>
                <div class="flex items-center space-x-2">
                  <div class="w-20 bg-gray-200  rounded-full h-2">
                    <div 
                      class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full"
                      :style="{ width: `${(agent.usage.thisMonthCalls / Math.max(...topAgents.map(a => a.usage.thisMonthCalls))) * 100}%` }"
                    ></div>
                  </div>
                  <span class="text-xs text-gray-600  w-12 text-right">{{ agent.usage.thisMonthCalls.toLocaleString() }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Main Content -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Top Agents -->
        <div class="lg:col-span-2">
          <div class="bg-white  rounded-lg border border-gray-200  h-full flex flex-col">
            <div class="p-4 border-b border-gray-200 ">
              <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-gray-900 ">Top Performing Agents</h2>
                <router-link 
                  to="/agent-center"
                  class="text-sm text-blue-600  hover:text-blue-700  font-medium"
                >
                  View all →
                </router-link>
              </div>
            </div>
            
            <div class="p-4 flex-1">
              <div class="space-y-3">
                <div 
                  v-for="agent in topAgents" 
                  :key="agent.id"
                  class="flex items-center justify-between p-3 bg-gray-50 /50 rounded-lg hover:bg-gray-100  transition-colors duration-200"
                >
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white text-sm font-bold">
                      {{ agent.metadata.logo }}
                    </div>
                    <div>
                      <h3 class="font-medium text-gray-900  text-sm">{{ agent.name }}</h3>
                      <p class="text-xs text-gray-600 ">{{ agent.usage.totalUsers }} users</p>
                    </div>
                  </div>
                  <div class="text-right">
                    <p class="font-semibold text-gray-900  text-sm">${{ (agent.earnings?.thisMonth || 0).toFixed(0) }}</p>
                    <p class="text-xs text-gray-600 ">this month</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Recent Activity -->
        <div class="lg:col-span-1">
          <div class="bg-white  rounded-lg border border-gray-200  h-full flex flex-col">
            <div class="p-4 border-b border-gray-200 ">
              <h2 class="text-lg font-semibold text-gray-900 ">Recent Activity</h2>
            </div>
            
            <div class="p-4 flex-1">
              <div class="space-y-3">
                <div class="flex items-start space-x-3">
                  <div class="w-6 h-6 bg-green-100  rounded-full flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-green-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 ">New Revenue</p>
                    <p class="text-xs text-gray-600 ">Content Creator earned $25.50</p>
                    <p class="text-xs text-gray-500 ">2h ago</p>
                  </div>
                </div>

                <div class="flex items-start space-x-3">
                  <div class="w-6 h-6 bg-blue-100  rounded-full flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-blue-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 ">New Users</p>
                    <p class="text-xs text-gray-600 ">Data Analyst gained 12 users</p>
                    <p class="text-xs text-gray-500 ">4h ago</p>
                  </div>
                </div>

                <div class="flex items-start space-x-3">
                  <div class="w-6 h-6 bg-purple-100  rounded-full flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-purple-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 ">Task Completed</p>
                    <p class="text-xs text-gray-600 ">E-commerce team finished 5 tasks</p>
                    <p class="text-xs text-gray-500 ">6h ago</p>
                  </div>
                </div>

                <div class="flex items-start space-x-3">
                  <div class="w-6 h-6 bg-orange-100  rounded-full flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-orange-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 ">Agent Published</p>
                    <p class="text-xs text-gray-600 ">Code Reviewer is now live</p>
                    <p class="text-xs text-gray-500 ">1d ago</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Active Teams -->
      <div class="mt-6">
        <div class="bg-white  rounded-lg border border-gray-200 ">
          <div class="p-4 border-b border-gray-200 ">
            <div class="flex items-center justify-between">
              <h2 class="text-lg font-semibold text-gray-900 ">Active Teams</h2>
              <router-link 
                to="/team-center"
                class="text-sm text-blue-600  hover:text-blue-700  font-medium"
              >
                View all →
              </router-link>
            </div>
          </div>
          
          <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div 
                v-for="team in activeTeams" 
                :key="team.id"
                class="bg-gray-50 /50 rounded-lg p-4 hover:bg-gray-100  transition-colors duration-200"
              >
                <div class="flex items-center justify-between mb-2">
                  <h3 class="font-medium text-gray-900  text-sm">{{ team.name }}</h3>
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800  ">
                    {{ team.metadata.status }}
                  </span>
                </div>
                <p class="text-xs text-gray-600  mb-3 line-clamp-2">{{ team.description }}</p>
                <div class="flex items-center justify-between text-xs">
                  <span class="text-gray-600 ">{{ team.performance.tasksCompleted }} tasks</span>
                  <span class="font-medium text-gray-900 ">{{ (team.performance?.successRate || 0).toFixed(0) }}% success</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { useAuthStore } from '../stores/auth'
  import { useUserStore } from '../stores/user'

  const authStore = useAuthStore()
  const userStore = useUserStore()

  // Computed
  const userDisplayName = computed(() => authStore.userDisplayName)
  const totalEarnings = computed(() => userStore.totalEarnings)
  const monthlyEarnings = computed(() => userStore.monthlyEarnings)
  const totalUsers = computed(() => userStore.totalUsers)
  const totalTasksCompleted = computed(() => userStore.totalTasksCompleted)
  const userAgents = computed(() => userStore.userAgents)
  const userTeams = computed(() => userStore.userTeams)

  const topAgents = computed(() => {
    return [...userAgents.value]
      .sort((a, b) => b.earnings.thisMonth - a.earnings.thisMonth)
      .slice(0, 3)
  })

  const activeTeams = computed(() => {
    return userTeams.value.filter(team => team.metadata.status === 'active')
  })

  // Chart data
  const revenueData = ref([120, 180, 240, 320, 280, 350, 420])
  const months = ref(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'])

  // Lifecycle
  onMounted(async () => {
    await Promise.all([
      userStore.fetchUserAgents(),
      userStore.fetchUserTeams()
    ])
  })
</script>

<style scoped>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>